<template>

  <div class="login">
  		<div class="login-icon">
  			<img src="../assets/img/header_logo.png" alt="">
  		</div>
  		<div class="login-ipt">
  			<input v-model="username" type="text" placeholder="请输入您的账号">
  			<input v-model="password" type="password" placeholder="请输入您的密码">
  		</div>
  		<input @click="login" type="button" value="登 录" class="login-btn">
  		<p class="result">{{$store.state.user.user.msg}}</p>
  		<div class="login-more">
  			<p>忘记密码?</p>
  			<p><span>没有账号？</span>
  				<router-link to="/reg" tag="a">立即注册</router-link>
  			</p>
  		</div>
  	</div>
  </template>
  
  
</template>

<script>
  export default {
    name:'login',
    props:{},
    data(){
      return {
    username:'',
    password:'',
    // mess:''
      }
    },
    components:{},
    mounted(){},
    updated(){},
    methods:{
      login(){
		 
        //1. axios 携带username，password，post
        this.$axios({
          url:'/login',
          method:'post',
          data:{username:this.username,password:this.password}
        }).then(
          res=>{
            if(res.err===1){
              //2. 失败 描述失败信息到页面
              // this.mess=res.msg
			  this.$store.commit('user/user',res)
            }else if(res.err===0){
              //3. 成功 种token到本地,跳转到之前 | 用户中心
			  // res.name = this.username 			  
              window.localStorage.setItem('user',JSON.stringify(res))
			  this.$store.commit('user/user',res)
			  
              if(this.$route.query.path){
                this.$router.push(this.$route.query.path)
              }else{
                this.$router.push('/home')
              }
            }
          }
        )
        
        
      }
    },
    computed: {
    }
  }
</script>

<style scoped>

	.login {
		height: 10.17rem;
		background-color: white;
		margin-top: -0.5rem;
		padding-bottom: 1.2rem;
		
	}
	
	.login-icon {
		margin: 0.5rem auto;
		width: 1.5rem;
		height: 1.5rem;
		background-color: white;
		position: relative;
		overflow: hidden;
	}
	
	.login-icon img {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.login-ipt {}
	input{font-size: .14rem;}
	.login-ipt input {
		border-bottom: 0.01rem solid gainsboro;
		width: 3rem;
		margin: 0 auto;
		height: 0.5rem;
		display: block;
		padding-left: 0.2rem;
	}
	
	.login-btn {
		width: 3rem;
		height: 0.5rem;
		background-color: #1ea9ff;
		margin: 0.5rem auto 0;
		display: block;
		border-radius: 0.25rem;
		font-size: 0.2rem;
		color: white;
	}
	
	.login-more p {
		text-align: center;
		margin: 0.2rem 0;
		color: #1198ff;
		font-size: 0.12rem;
	}
	
	.login-more p span {
		color: #000;
	}
	
	.login-more p a {
		color: #1198ff;
	}
	
	.result {
		color: #1198FF;
		font-size: 0.14rem;
		position: absolute;
		top: 3.1rem;
		left: 0.4rem;
	}
	
</style>


